<template>
	<div class="chuAdd">
		<pub-head title="新增出行人" v-if="isAdd"></pub-head>
		<pub-head title="编辑出行人" v-else></pub-head>
		<ul class="add-items flex flexv mt2">
		    <li class="add-item flex">
		        <span class="name bold">姓名</span>
		        <input type="text" maxlength="10" placeholder="请输入出行人的姓名" v-model="name" class="flex1">
		    </li>
			<li class="add-item flex">
			    <span class="name bold">证件类型</span>
			    <span class="flex1">身份证</span>
			</li>
			<li class="add-item flex">
			    <span class="name bold">证件号</span>
			    <input type="text" maxlength="18" placeholder="用于确认身份" v-model="idCard" class="flex1">
			</li>
		</ul>
		<div v-if="isAdd" class="comfirm" @click="toAdd">
			确认
		</div>
		<div class="flex comfirm-1 jus-b" v-else>
			<div class="comfirm-l" @click="toRemove">删除</div>
			<div class="comfirm-r" @click="toEdit">确认</div>
		</div>
	</div>
</template>

<script>
	import {
		u_Reg
	} from '@/config/utils.js';
	import Vue from 'vue';
	import pubHead from '@/components/head';
	import {addTrip,delTrip} from '@/request/api.js'
	export default{
		data(){
			return {
				name:'',
				idCard:'',
				isAdd:false,
				id:''
			}
		},
		components: {
		    pubHead,
		},
		created() {
			let data = JSON.parse(this.$route.query.item)
			console.log(data)
			if(data != 1)
			{
				this.name = data.name
				this.idCard = data.idcard
				this.id = data.id
			}else{
				this.isAdd = true
			}
		},
		methods:{
			toAdd(){
				if(this.name==''){
					this.$tip('请输入姓名！')
					return
				}
				if(this.idCard==''){
					this.$tip('请输入身份证号！')
					return
				}
				if (!u_Reg(this.idCard, 'idCard')) {
					this.$tip('请输入正确的身份证号码!');
					return
				}
				addTrip({
					token:localStorage.getItem('token'),
					name:this.name,
					idcard:this.idCard
				}).then(res=>{
					if(res.code==1){
						this.$tip('添加出行人成功！')
						setTimeout(() =>{
						    this.$router.go(-1);
						},1000)
					}else{
						this.$tip(res.msg)
					}
				})
			},
			toEdit(){
				if(this.name==''){
					this.$tip('请输入姓名！')
					return
				}
				if(this.idCard==''){
					this.$tip('请输入身份证号！')
					return
				}
				if (!u_Reg(this.idCard, 'idCard')) {
					this.$tip('请输入正确的身份证号码!');
					return
				}
				addTrip({
					token:localStorage.getItem('token'),
					name:this.name,
					idcard:this.idCard,
					id:this.id
				}).then(res=>{
					if(res.code==1){
						this.$tip('编辑出行人成功！')
						setTimeout(() =>{
						    this.$router.go(-1);
						},1000)
					}else{
						this.$tip(res.msg)
					}
				})
			},
			toRemove(){
				delTrip({
					token:localStorage.getItem('token'),
					id:this.id
				}).then(res=>{
					if(res.code==1){
						this.$tip('删除出行人成功！')
						setTimeout(() =>{
						    this.$router.go(-1);
						},1000)
					}else{
						this.$tip(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.chuAdd{
		min-height: 100vh;
		background-color: #f0f0f0;
		.add-items{
		    background-color: #fff;
		    .add-item{
		        height: 0.9rem;
		        padding: 0 0.28rem;
		        border-bottom: 1px solid #dedede;
		        font-size: 0.3rem;
		        color: #333;
		        line-height: 0.9rem;
				.name{
				    width: 1.6rem;
				}
		    }
		}
		.comfirm{
			margin: 2.6rem auto;
			width: 5.2rem;
			height: 0.8rem;
			background-color: #53AB2A;
			line-height: 0.8rem;
			text-align: center;
			color: #fff;
			font-size: 0.32rem;
			border-radius: 0.4rem;
		}
		.comfirm-1{
			margin: 2.6rem auto;
			width: 92%;
			.comfirm-l{
				width: 3.2rem;
				height: 0.8rem;
				line-height: 0.8rem;
				text-align: center;
				color: #fff;
				font-size: 0.32rem;
				background-color: #EE1C1A;
				border-radius: 0.4rem;
			}
			.comfirm-r{
				width: 3.2rem;
				height: 0.8rem;
				line-height: 0.8rem;
				text-align: center;
				color: #fff;
				font-size: 0.32rem;
				background-color: #53AB2A;
				border-radius: 0.4rem;
			}
		}
	}
	
</style>
